<template>

  <div>

    <div id="page">
      <!--<nav class="gtco-nav" role="navigation">-->
        <!--<div class="gtco-container">-->
          <!--<div class="row">-->
            <!--<div class="col-md-12 text-right gtco-contact">-->
              <!--<ul class="">-->
                <!--<li><a href="#"><i class="ti-mobile"></i> 010-56212504</a></li>-->
                <!--&lt;!&ndash;<li><a href="http://twitter.com/gettemplatesco"><i class="ti-twitter-alt"></i> </a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#"><i class="icon-mail2"></i></a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#"><i class="ti-facebook"></i></a></li>&ndash;&gt;-->
              <!--</ul>-->
            <!--</div>-->
          <!--</div>-->
          <!--<div class="row">-->
            <!--<div class="col-sm-4 col-xs-12">-->
              <!--<div id="gtco-logo"><img src="static/img/pngicon64.png" alt=""><a href="/">四季无边</a></div>-->
            <!--</div>-->
            <!--<div class="col-xs-8 text-right menu-1">-->
              <!--<ul>-->
                <!--<li class="active">-->
                  <!--<a href="/">网站首页</a>-->
                <!--</li>-->
                <!--<li>-->
                  <!--<a href="#/products">产品中心</a>-->
                <!--</li>-->
                <!--<li class="">-->
                  <!--<a href="#/information">公司资讯</a>-->
                <!--</li>-->
                <!--&lt;!&ndash;<li class="has-dropdown">&ndash;&gt;-->
                <!--&lt;!&ndash;<a href="#">Dropdown</a>&ndash;&gt;-->
                <!--&lt;!&ndash;<ul class="dropdown">&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#">HTML5</a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#">CSS3</a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#">Sass</a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;<li><a href="#">jQuery</a></li>&ndash;&gt;-->
                <!--&lt;!&ndash;</ul>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
                <!--<li><a href="#/add">加入我们</a></li>-->
                <!--<li><a href="#/to">关于</a></li>-->
              <!--</ul>-->
            <!--</div>-->
          <!--</div>-->

        <!--</div>-->
      <!--</nav>-->

      <header id="gtco-header" class="gtco-cover" role="banner" style="background-image:url(static/img/back.jpg);">
        <div class="overlay"></div>
        <div class="gtco-container">
          <div class="row">
            <div class="col-md-12 col-md-offset-0 text-left">
              <div class="display-t">
                <div class="display-tc">
                  <h1 id="ac" name="0" class="animate-box" data-animate-effect="fadeInUp">影视 游戏一触即发</h1>
                  <h2 class="animate-box" data-animate-effect="fadeInUp">游戏发行、动漫发行、音乐发行、影视发行</h2>
                  <p class="animate-box" data-animate-effect="fadeInUp"><a href="#/products"
                                                                           class="btn btn-white btn-lg btn-outline">了解更多</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>


    </div>


    <div id="gtco-products">
      <section class="container m-footer waypoint" data-animate-up="nav-strict" data-animate-down="nav-show">

        <div class="recent-works">
          <div class="col-sm-4 col-md-4 col-lg-4">
            <div class="works-decript">
              <h3>北京四季无边科技有限公司</h3>
              <p class=" cn_i">
                北京四季无边科技有限公司是一家专业从事数字内容的策划、创作、发行的科技公司，2014年4月由互联网业内资深人士创办，是一支具有卓越策划能力、优秀表现力、高超创造力的团队。目前公司主要业务涉及游戏发行、动漫发行、音乐发行、影视发行等多个领域。
              </p>
              <!--hidden-sm-->
              <p class=" cn_i">
                北京四季无边科技有限公司坚持以专业的态度、准确的市场定位、多元化的运营管理，在数字文化领域进行积极探索，致力于推动娱乐潮流的走向，致力于成为中国最具影响力的数字娱乐文化产业企业。
              </p>

              <p class="cn_i">
                2016年8月北京四季无边科技有限公司在新疆霍尔果斯设立全资子公司。
              </p>
            </div>
          </div>
          <div class="col-sm-8 col-md-8 col-lg-8 sw">
            <img src="static/img/hard-work-with-a-book-picjumbo-com.jpg" width="100%">
          </div>
        </div>
      </section>


    </div>

    <div id="gtco-portfolio" class="gtco-section">
      <div class="gtco-container">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box">
            <h2>游戏截图</h2>
          </div>
        </div>

        <div class="row row-pb-md">
          <div class="col-md-12">
            <ul id="gtco-portfolio-list">
              <li class="two-third animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/11.jpg); ">
                <a href="#" class="color-1">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Web Design</span>-->
                  <!--<h2>View the Earth from the Outer Space</h2>-->
                  <!--</div>-->
                </a>
              </li>
              <li class="one-third animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/12.jpg); ">
                <a href="#" class="color-2">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Illustration</span>-->
                  <!--<h2>Sleeping in the Cold Blue Water</h2>-->
                  <!--</div>-->
                </a>
              </li>


              <li class="one-half animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/13.jpg); ">
                <a href="#" class="color-3">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Illustration</span>-->
                  <!--<h2>Building Builded by Man</h2>-->
                  <!--</div>-->
                </a>
              </li>
              <li class="one-half animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/14.jpg); ">
                <a href="#" class="color-4">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Web Design</span>-->
                  <!--<h2>The Peaceful Place On Earth</h2>-->
                  <!--</div>-->
                </a>
              </li>

              <li class="one-third animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/15.jpg); ">
                <a href="#" class="color-5">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Web Design</span>-->
                  <!--<h2>I'm Getting Married</h2>-->
                  <!--</div>-->
                </a>
              </li>
              <li class="two-third animate-box" data-animate-effect="fadeIn"
                  style="background-image: url(static/img/16.jpg); ">
                <a href="#" class="color-6">
                  <!--<div class="case-studies-summary">-->
                  <!--<span>Illustration</span>-->
                  <!--<h2>Beautiful Flowers In The Air</h2>-->
                  <!--</div>-->
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4 col-md-offset-4 text-center animate-box">
            <a href="#/products" class="btn btn-white btn-outline btn-lg btn-block">查看更多</a>
          </div>
        </div>


      </div>
    </div>

    <div id="gtco-counter" class="gtco-section animated">
      <div class="gtco-container">

        <div class="partner col-md-12 col-xs-12 col-sm-12 ">

          <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center gtco-heading animate-box fadeInUp animated-fast">
              <h2>他们选择了四季无边科技</h2>
              <p>值得信赖的合作伙伴</p>
            </div>
          </div>

          <ul class="partnerQY">
            <li class="col-xs-12 col-sm-6 col-md-3"><img src="static/img/yd.jpeg" alt="中国移动"></li>
            <li class="col-xs-12 col-sm-6 col-md-3"><img src="static/img/liantogn.jpg" alt="中国联通"></li>
            <li class="col-xs-12 col-sm-6 col-md-3"><img src="static/img/dianxin.jpg" alt="中国电信"></li>
            <li class="col-xs-12 col-sm-6 col-md-3"><img src="static/img/aiqiyi.jpg" alt="爱奇艺"></li>

          </ul>

        </div>
      </div>


    </div>


    <div id="gtco-subscribe">
      <div class="gtco-container">
        <div class="row animate-box">
          <div class="col-md-8 col-md-offset-2 text-center gtco-heading">
            <h2>订阅</h2>
          </div>
        </div>
        <div class="row animate-box">
          <div class="col-md-12">
            <form class="form-inline">
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label for="email" class="sr-only">邮箱</label>
                  <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label for="name" class="sr-only">名字</label>
                  <input type="text" class="form-control" id="name" placeholder="昵称">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <button type="submit" class="btn btn-default btn-block">订阅</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>


  </div>


</template>

<script>
  export default {
    name: 'main',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {
    overflow-x: -webkit-paged-y;
  }

  hr {
    color: #bbb;
  }

  h1, h2 {
    font-weight: normal;
  }

  ul.partnerQY {
    list-style-type: none;
    padding: 0;
  }

  .partnerQY li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  div.li {
    padding-top: 84px;
    padding-bottom: 84px;
    border-bottom: 1px solid #bbb;
  }

  .li img {
    display: inline-block;
    display: -webkit-inline-box;
  }

  .li h4 {
    color: #5895f1;
    font-size: 24px;
    line-height: 1;
    margin-top: 48px;
  }

  .li p {
    font-size: 18px;
    line-height: 26px;
  }

  div.end {
    border-bottom: none;
  }

  .hed {
    margin-top: 5rem;
  }

  .hed h3 {
    font-size: 24px;
    color: #000;
  }

  .hed p {
    font-size: 18px;
    color: #aaa;
  }

  .advList {
    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
  }

  .advList li {
    margin: 2em 2em;
    cursor: pointer;
    border-radius: 8px;
    float: left;
    min-width: 200px;
    height: 260px;
    background: #f2f2f2;
    transition: all .6s;
  }

  .advList li:hover {
    transform: scale(1.1);
    box-shadow: 0px 5px 8.6px 1.4px rgba(67, 67, 67, 0.3);
  }

  .advList li img {
    padding: 22px 0;
    display: inline-block;
    margin: 0 auto;
  }

  .advList li h4 {
    font-size: 20px;
    font-weight: 600;
  }

  .advList li p {
    font-size: 16px;
    line-height: 20px;
  }

  .partnerQY {
    overflow: hidden;
  }

  .partnerQY img {
    width: 100%;
  }

  .partnerQY li {
    margin: 20px 0px;
    padding: 16px 20px;
  }

  .partnerQY li:hover {
    cursor: pointer;
    box-shadow: 5px 5px 8px rgba(67, 67, 67, 0.3) inset, -5px -5px 8px rgba(67, 67, 67, 0.3) inset;
  }

  .partnerQY li img {
    display: inline-block;
    margin: 0 auto;
  }

</style>
